import { connect, useDispatch ,useSelector} from 'react-redux'
import {bindActionCreators,Dispatch} from "redux"
import * as Actions from "../store/action"
import React,{useEffect,useState} from 'react'
import { SETLISTTYPE} from '../type/store.d'
import { Tabs } from 'react-vant';
import axios from "../api/axios"
import "../utils/index"

interface ROUTERMOCK{
  id:number;
  img:string;
  title:string;
  price:string;
}

interface MYPROPS{
  setList:(params:string)=>void
  list:Array<ROUTERMOCK>
}

function Shouye(props:MYPROPS) {
  const dispatch=useDispatch()
  const [params,setparmas]=useState([])
  console.log(props.list)
  useEffect(()=>{
    dispatch(
      {
        type:SETLISTTYPE,
        payload:params
      }
    )
  },[params])
  useEffect(()=>{ 
      axios.get("/list").then(res=>{
        setparmas(res.data.list)
      })
  },[])
  return (
    <div>
      <div className="demo-tabs">
        <Tabs active={0}>
          
            <Tabs.TabPane title={`标签`}>
              {/* <div v-for="item,index:number in props.list" key="index">
                {index}
              </div> */}
            </Tabs.TabPane>
            <Tabs.TabPane title={`标签`}>
              内容
            </Tabs.TabPane>
        </Tabs>
      </div>
    </div>
  )
}

const mapStateToProps = (state:any) => ({
  list:state.list
})

const mapDispatchToProps = (dispatch:Dispatch)=>{
  return {...bindActionCreators(Actions,dispatch)}
}

export default connect(mapStateToProps,mapDispatchToProps)(Shouye)